<template>
    <div class="foot">
      <div :class="['footitem',{active:idx===index}]" v-for="(item, index) of items" :key="index" @click="$router.push(item.push)">
        <img :src="idx===index?item.iconSelect:item.icon" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
</template>

<script>
export default {
  name: 'bottom-nav',
  props: ['idx'],
  data: function () {
    return {
      items: [
        {
          name: '首页',
          push: '/home',
          icon: '../../static/images/ihome.png',
          iconSelect: '../../static/images/ihome_select.png'
        },
        {
          name: '课程',
          push: '/course',
          icon: '../../static/images/icourse.png',
          iconSelect: '../../static/images/icourse_select.png'
        },
        {
          name: '我的',
          push: '/mine',
          icon: '../../static/images/imine.png',
          iconSelect: '../../static/images/imine_select.png'
        }
      ]
    }
  }
}
</script>

<style scoped>
.foot{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.4rem;
  align-items: center;
  display: flex;
  justify-content: space-between;
  background: #f8f8f8;
}
.footitem{
  text-align: center;
  width: 33.33%;
}
.footitem img{
  display: block;
  margin: .1rem auto;
  width: .6rem;
}
.footitem.active p{
  color: #BC0B21;
}
.footitem p{
  font-size: .38rem;
}
</style>
